<!-- d3内容组件 -->
<template>
  <div class="d3_content" style="display: flex; position: relative;">
    <div class="d3_control" v-if="option.control" :class="{collapse: option.isCollapse}">
      <div class="control_auto">
        <div class="control_wrap">
          <!-- <div class="control_force">
        <button @click="restartForce">重新启动仿真:restart()</button>
        <button @click="stopForce">重新启动仿真:stop()</button>
      </div> -->
          <!-- 力模拟控制 -->
          <div class="control_force">
            <el-collapse v-model="activeNames">
              <el-collapse-item title="电荷" name="1">
                电荷力：<el-slider v-model="forceOption.chargeStrength" :min="-300" :max="300" @change="forceChange($event, 'forceOption.chargeStrength')"></el-slider>
              </el-collapse-item>
              <el-collapse-item title="链接对象" name="2">
                弹簧距离： <el-slider v-model="forceOption.linkDistance" :min="0" :max="800" @change="forceChange($event, 'forceOption.chargeStrength')"></el-slider>
                弹簧强度： <el-slider v-model="forceOption.linkStrength" :step="0.1" :min="0" :max="1" @change="forceChange($event, 'forceOption.chargeStrength')"></el-slider>
              </el-collapse-item>
              <el-collapse-item title="碰撞检测" name="3">
                碰撞半径：<el-slider v-model="forceOption.collisionRadius" :min="0" :max="800" @change="forceChange($event, 'forceOption.chargeStrength')"></el-slider>
                碰撞强度：<el-slider v-model="forceOption.collisionStrength" :step="0.1" :min="0" :max="1" @change="forceChange($event, 'forceOption.chargeStrength')"></el-slider>
                迭代次数：<el-slider v-model="forceOption.collisionIterations" :step="0.01" :min="0" :max="1" @change="forceChange($event, 'forceOption.chargeStrength')"></el-slider>
              </el-collapse-item>
            </el-collapse>
          </div>
          <!-- 控制关联文字显隐 -->
          <div class="control_item d3_text">
            <h3>是否显示关联内容</h3>
            <div><el-radio-group v-model="option.textDisplay" size="mini"><el-radio-button :label="true">显示</el-radio-button><el-radio-button :label="false">隐藏</el-radio-button></el-radio-group></div>
          </div>

          <!-- 搜索节点 -->
          <div class="control_item d3_nativeSearch">
            <h3>搜索节点</h3>
            <div><el-input @input="searchKeyWords" v-model="option.keywords" clearable placeholder="请输入内容" /></div>
            <p class="font-sky" style="text-align: left;">
              <strong>节点个数：{{ nodes.length }}</strong>
              <br>
              <strong>关系个数：{{ links.length }}</strong>
              <br>
              <strong>平均度数：{{ gDegree }}</strong>
              <br>
              <strong>图密度：{{ gDensity }}</strong>
              <br>
              <strong>稀疏度：{{ gSparsity }}</strong>
            </p>
          </div>
          <!-- 切换显示分类 -->
          <div class="control_item d3_category">
            <h3>切换显示分类</h3>
            <!-- 节点分类 -->

            <div class="node_category">
              <div v-for="(item, index) in option.node_category" :key="index" style="cursor: pointer;">
                <div style="display: flex; margin: 10px 0;" @click="toggleCategory(item)">
                  <span style="width: 50px; height: 25px; margin-right: 10px;" :style="{ backgroundColor: item.value ? item.color : '#aaa' }"></span>
                  <span style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap; flex: 1;" :style="{ color: item.value ? '#000' : '#aaa' }">{{ item.label }}</span>
                </div>
              </div>
            </div>

            <!-- 关系分类 -->
            <div class="relative_category"></div>

          </div>
        </div>
      </div>
    </div>
    <div class="svg_wrap" style="flex: 1"></div>

    <!-- 右边提示信息 -->
    <!-- 选择倒数第二级别 -->
    <el-card class="node-card info_yhx" v-if="selectCurrentYH.ID">
      <div slot="header" class="clearfix">
        <span>隐患项:{{ selectCurrentYH.name }}</span>
      </div>
      <div class="content">
        <!-- <div><span class="title">隐患名称：</span><span></span></div> -->
        <span class="title">单位名称：</span>
        <div v-for="(item,index) in selectCurrentYH.YHRWXX">
          <div class="rw_title"><span type="text" @click="dwmcClick(item)" style="color: #66b1ff; cursor:pointer">{{index + 1}}、{{ item.DWMC }}</span></div>
        </div>
      </div>
    </el-card>

    <el-card class="node-card info_yhx" v-if="selectCurrentRWMC.DWID">
      <div slot="header" class="clearfix">
        <span style="color: black; cursor:pointer; font-size: 15px;margin-right: 10px;" v-if="selectCurrentYHCopy.ID" @click="backYHList"><i class="el-icon-back"></i>返回</span><span>{{ selectCurrentRWMC.DWMC }}{{ selectCurrentYHCopy.ID }}</span>
      </div>
      <div class="content">
        <div><span class="title">隐患项：</span><span v-html="selectCurrentRWMC.ZLXQYHMC"></span></div>
        <div v-for="item in shdwXgrwData" :key="item.RWID">
          <div class="rw_title" @click="rwmcClick(item)"><span class="title">任务名称：</span> <span type="text" style="color: #66b1ff; cursor:pointer">{{ item.RWMC }}</span></div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import * as d3 from 'd3'
// import install from '@/plugins/d3-context-menu'
// install(d3) // 为d3注册右键菜单插件
export default {
  props: {
    data: { type: Object, required: true },//数据
    config: { type: Object, required: true },//配置
    // node_category: { type: Array, default() { return [] } }
  },
  computed: {
    gDegree() { return this.links.length && this.nodes.length ? (this.links.length / this.nodes.length).toFixed(2) : '0' },//平均度数
    gDensity() { return this.nodes.length <= 1 ? 0 : (this.links.length / (this.nodes.length * (this.nodes.length - 1))).toFixed(2) },//图密度
    gSparsity() { return this.links.length && this.nodes.length ? (this.links.length / (this.nodes.length * Math.log(this.nodes.length))).toFixed(2) : '0' },//稀疏度：
  },
  data() {
    return {
      option: {},

      /** data 数据 */
      nodes: [],
      links: [],

      /**node节点和文本 */
      nodeWrap: null,
      node: null,//node节点
      nodeText: null, //node文本



      forceSimulation: null,//力-实例
      svg: null,//元素
      forceOption: {
        chargeStrength: -300, //电荷力 强度

        //弹簧
        linkDistance: 400,//弹簧距离
        linkStrength: .5,//弹簧强度

        //碰撞检测
        collisionRadius: 0,
        collisionStrength: .3,
        collisionIterations: 0.15

      },


      /**线、文本、文本框 */
      lineWrap: null,
      line: null,//线条
      textWrap: null,/**文本、文本框 */
      lineText: null,//线条文字
      lineRect: null,//文本框


      isclickNode: false,//是否点击了node
      currentNodeData: {},//当前节点数据

      //控件配置
      activeNames: '0',

      /**右侧数据 */
      selectCurrentYH: {},//二级隐患node
      selectCurrentYHCopy: {},//二级隐患node 备用

      //点击社会单位
      selectCurrentRWMC: {},//任务名称node
      shdwXgrwData: [],//单位的相关任务
    }
  },
  watch: {
    data: {
      handler(newValue, oldValue) {
        console.log(newValue, 'newVlaue')
        this.option.textDisplay = true
        this.option.node_category.forEach(item => { item.value = true })
        this.nodes = newValue.nodes
        this.links = newValue.links
        this.init()
      },
      deep: true,
    },
    config: {
      handler(newValue, oldValue) {
        let obj = {
          control: newValue.control || true,
          textDisplay: newValue.textDisplay || true,
          keywords: newValue.keywords || '',
          control: newValue.control || true,
          node_category: newValue.node_category || [],
        }
        this.forceOption.collisionRadius = newValue.nodeSize + 50,
          this.option = { ...newValue, ...obj }

      },
      deep: true,
      immediate: true
    },
    'option.textDisplay'(newValue, oldValue) {
      this.toggleTextStatus()
    },
    selectCurrentRWMC(newValue, oldValue) {
      if (newValue.DWID) {
        this.getRWLB(newValue.DWID)
      }
    }
  },
  methods: {
    forceChange(value, type) {
      console.log(value, type, '--value-type')
      this.init()
    },
    //清空选中的对象
    clearSelectNode() {
      this.option.keywords = ''
      this.selectCurrentYH = {}
      this.selectCurrentYHCopy = {}
      this.selectCurrentRWMC = {}
    },

    //初始化
    init() {
      d3.select('.svg_wrap').selectAll('*').remove()// 渲染前清空svg内的元素
      this.initRender()//创建画布
      this.addMarkers()//创建数据
      this.d3SelectData()
      this.initForceSimulation()//初始化力学模拟
    },
    //初始化渲染
    initRender() {
      this.svg = d3.select('.svg_wrap').append('svg').attr('width', '100%').attr('height', '680px')
        .on('click', () => { console.log(this.isclickNode); this.isclickNode = false; this.clearSelectNode(); this.mouseleaveNode() })
        // 给画布绑定zoom事件（缩放、平移）
        .call(d3.zoom().on('zoom', event => {
          var scale = event.transform.k, translate = [event.transform.x, event.transform.y]
          // this.svg.attr('transform', 'translate(' + translate[0] + ', ' + translate[1] + ') scale(' + scale + ')');
          this.svg.attr("transform", event.transform)
        })).append('g').attr('width', '100%').attr('height', '100%')
    },

    /**
     * 处理数据工具
     * @param level 层级
     * @return size 大小
     */
    //处理node节点大小
    handleNodeSize(level) { let size = this.config.nodeSize; level = (level && parseInt(level)) || 1; return size - ((level - 1) * 3) },


    //d3 select data
    d3SelectData() {
      let _this = this
      //绘制边上的文字
      this.lineWrap = this.svg.selectAll('g.lineText_wrap').data(this.links).enter().append('g').attr("class", "lineText_wrap")
      //连线
      this.line = this.lineWrap.append('g').attr('class', 'line_wrap').append('line').attr('stroke', '#888').attr('stroke-width', 2).attr('opacity', 1).attr("marker-end", "url(#posMarker)")

      this.textWrap = this.lineWrap.append('g').attr('class', 'line_rect_text')
      //连线-矩形
      this.lineRect = this.textWrap.append('rect').attr('width', function (d) { return d.relation ? d.relation.length * 20 : 50 }).attr('height', 20).attr('y', -10).attr('fill', '#fff').attr('stroke', '#888').style('display', (d) => { return !d.relation ? 'none' : 'unset' })
      //连线-内容
      this.lineText = this.textWrap.append('text').attr('text-anchor', 'middle').attr('fill', '#333').text(function (d, i) { return d.relation || ''; });


      //节点、文本
      this.nodeWrap = this.svg.selectAll('g.node_wrap').data(this.nodes).enter().append('g').attr('class', 'node_wrap').style("cursor", "pointer").on("click", this.nodeClick).on('mouseover', this.mouseoverNode).on('mouseleave', this.mouseleaveNode).call(this.drag())//拖拽

      //节点
      this.node = this.nodeWrap.append('circle').attr('r', d => this.handleNodeSize(d.level)).attr("fill", d => { return this.config.colors[d.level ? d.level : this.config.colors.length - 1] }).attr("stroke", "none").attr("name", d => d.name).attr("id", d => d.id).exit().remove()

      //node中的文本
      this.nodeText = this.nodeWrap.append('text').attr('class', 'node_text').attr('font-size', () => 13).attr('fill', '#fff').attr('name', d => d.name).attr('text-anchor', 'middle')
        .attr('x', function (d) { return _this.formateNodeText(d3.select(this), d.name) })
    },

    //处理node 中的 文本
    formateNodeText(el, text) {
      let len = text.length
      text = text || ''
      if (len <= 3) { el.append('tspan').attr('x', 0).attr('y', 6).text(text) }
      else {
        const topText = text.substring(0, 3)
        const midText = text.substring(3, 7)
        let botText = text.substring(7, len)
        let topY = -16, midY = 6, botY = 26
        if (len <= 7) { topY = -10; midY = 20 } else if (len > 10) { botText = text.substring(7, 9) + '...' }
        el.text('')
        el.append('tspan').attr('x', 0).attr('y', topY).text(function () { return topText })
        el.append('tspan').attr('x', 0).attr('y', midY).text(function () { return midText })
        el.append('tspan').attr('x', 0).attr('y', botY).text(function () { return botText })
      }
    },


    //力学模拟
    initForceSimulation() {
      // 定义碰撞检测模型
      this.forceCollide = d3.forceCollide()
        .radius(this.forceOption.collisionRadius)//半径访问器-将节点视为具有一定 radius 的圆
        .strength(this.forceOption.collisionStrength)//碰撞力的强度
        .iterations(this.forceOption.collisionIterations) //迭代次数


      //力
      this.forceSimulation = d3.forceSimulation(this.nodes)//创建 力模拟实力
        //为力模型新加某种力
        .force("link", d3.forceLink(this.links).id(d => d.id).distance(this.forceOption.linkDistance).strength(this.forceOption.linkStrength))//弹簧力-弹簧模型,力的强度与被链接两个节点的距离成比例
        .force("charge", d3.forceManyBody().strength(this.forceOption.chargeStrength))//电荷力
        .force("center", d3.forceCenter(this.svg.node().parentElement.clientWidth / 2, this.svg.node().parentElement.clientHeight / 2))//向心力-用指定的x坐标和y坐标创建一个居中力
        .force("collision", this.forceCollide)//碰撞检测
        // .force("positioning", d3.forceRadial(200, this.svg.node().parentElement.clientWidth / 2, this.svg.node().parentElement.clientHeight / 2))//碰撞检测
        .on("tick", this.ticked)//监听力学
    },

    getTransform(source, target, _dis) {
      var r;
      if (target.x > source.x) {
        if (target.y > source.y) {
          r = Math.asin((target.y - source.y) / _dis)
        } else {
          r = Math.asin((source.y - target.y) / _dis);
          r = -r;
        }
      } else {
        if (target.y > source.y) {
          r = Math.asin((target.y - source.y) / _dis);
          r = Math.PI - r;
        } else {
          r = Math.asin((source.y - target.y) / _dis);
          r -= Math.PI;
        }
      }
      r = r * (180 / Math.PI);
      return "translate(" + source.x + "," + source.y + ")rotate(" + r + ")";
    },
    // 求两点间的距离
    getDis(s, t) { return Math.sqrt((s.x - t.x) * (s.x - t.x) + (s.y - t.y) * (s.y - t.y)) },
    // ticked()函数确定link线的起始点x、y坐标 node确定中心点 文本通过translate平移变化
    ticked() {

      //lineWrap
      this.lineWrap.attr("transform", d => { return this.getTransform(d.source, d.target, this.getDis(d.source, d.target)) });
      //连线
      this.line.attr("x1", d => this.handleNodeSize(d.source.level)).attr("y1", 0).attr("x2", d => this.getDis(d.source, d.target) - this.handleNodeSize(d.source.level) - 10).attr("y2", 0)
      //连线-矩形
      this.lineRect.attr("x", d => this.getDis(d.source, d.target) / 2 - (d.relation ? d.relation.length * 20 / 2 : 25))
      //连线-文字
      this.lineText.attr("x", (d, i, el) => { return this.getDis(d.source, d.target) / 2 })
        .attr("y", 5).attr("transform", (d) => {
          // 7.3.3 更新文本反正
          if (d.target.x < d.source.x) {
            var x = this.getDis(d.source, d.target) / 2;
            return 'rotate(180 ' + x + ' ' + 0 + ')';
          } else { return 'rotate(0)'; }
        });

      // 节点
      this.nodeWrap.attr("transform", d => { return `translate(${d.x}, ${d.y})` });
      return;

    },
    //点击事件
    nodeClick(event, data) {
      event.stopPropagation()
      this.isclickNode = true
      this.mouseoverNode(event, data)
      this.clearSelectNode();
      if (data.YHRWXX && data.YHRWXX.length) { this.selectCurrentYH = data }
      else if (data.DWID) { this.selectCurrentRWMC = data }
    },
    // 绘制关系箭头
    addMarkers() {
      // 定义箭头的标识
      var defs = this.svg.append("defs")
      const posMarker = defs.append("marker").attr("id", "posMarker").attr("orient", "auto").attr("stroke-width", 2).attr("markerUnits", "strokeWidth").attr("markerUnits", "userSpaceOnUse").attr("viewBox", "0 -5 10 10").attr("markerWidth", 12).attr("markerHeight", 12).append("path").attr("d", "M 0 -5 L 10 0 L 0 5").attr('fill', '#888').attr("stroke-opacity", 0.6);
      const posActMarker = defs.append("marker").attr("id", "posActMarker").attr("orient", "auto").attr("stroke-width", 2).attr("markerUnits", "strokeWidth").attr("markerUnits", "userSpaceOnUse").attr("viewBox", "0 -5 10 10").attr("markerWidth", 12).attr("markerHeight", 12).append("path").attr("d", "M 0 -5 L 10 0 L 0 5").attr('fill', '#1E90FF').attr("stroke-opacity", 0.6);
    },
    //node 拖拽事件
    drag() {
      let _this = this
      function dragsubject(event) {
        console.log(event, 'dragsubject')
        return _this.forceSimulation.find(event.x, event.y);
      }

      function dragstarted(event) {
        // console.log(event, 'dragstarted')
        if (!event.active) _this.forceSimulation.alphaTarget(0.3).restart();
        event.subject.fx = event.subject.x;
        event.subject.fy = event.subject.y;
      }

      function dragged(event) {
        // console.log(event, 'dragged')
        event.subject.fx = event.x;
        event.subject.fy = event.y;
      }

      function dragended(event) {
        // console.log(event, 'dragended')
        if (!event.active) _this.forceSimulation.alphaTarget(0);
        // 注释以下代码，使拖动结束后固定节点
        event.subject.fx = null;//如果想要某个节点解除固定，则将 node.fx 和 node.fy 设置为 null 或者删除这两个属性。
        event.subject.fy = null;//如果想要某个节点解除固定，则将 node.fx 和 node.fy 设置为 null 或者删除这两个属性。
      }

      return d3.drag()
        .subject(dragsubject)
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended)
    },
    //鼠标移入node节点上
    mouseoverNode(event, data) {
      //节点
      this.nodeWrap.attr('class', (d) => { if (data.id == d.id || data.id == d.pid || data.pid == d.id || (data.pids && data.pids.includes(d.id)) || (d.pids && d.pids.includes(data.id))) { return 'node_wrap actived' } else { return this.isclickNode ? 'node_wrap disactived' : 'node_wrap' } })
      //line
      this.lineWrap.attr('class', (d) => { if (d['source'].id == data.id || d['target'].id == data.id) { return 'lineText_wrap actived' } else { return this.isclickNode ? 'lineText_wrap disactived' : 'lineText_wrap' } })
    },
    //鼠标离开节点
    mouseleaveNode(event, data) {
      // 移除所有样式
      if (!this.isclickNode) {
        this.nodeWrap.attr('class', 'node_wrap')
        this.lineWrap.attr('class', 'lineText_wrap')
      }
    },



    /**----------------------------------------------------------------------控制器------------------------------------------------------------------- */
    restartForce() { console.log('this.forceSimulation.restart()'); this.forceSimulation.restart() },//重新启动仿真
    stopForce() { console.log('this.forceSimulation.stop()'); this.forceSimulation.stop() },//暂停仿真
    //切换文本显隐
    toggleTextStatus() { this.option.textDisplay ? this.textWrap.attr('display', 'block') : this.textWrap.attr('display', 'none') },
    //搜索节点
    searchKeyWords(value) {
      // 如果Input值是空的显示所有的圆和线(没有进行筛选)
      if (this.option.keywords === '') {
        this.nodeWrap.attr('class', 'node_wrap')
        this.lineWrap.attr('class', 'lineText_wrap')
      }
      // 否则判断判断三个元素是否等于name值，等于则显示该值
      else {
        this.isclickNode = true
        this.nodeWrap.attr('class', 'node_wrap disactived')
        this.lineWrap.attr('class', 'lineText_wrap disactived')


        let nodeArr = []
        this.nodeWrap.each(d => {
          if (d.name.indexOf(this.option.keywords) != -1) {
            console.log(d.name, 'd')
            if (d.id && !nodeArr.includes(d.id)) { nodeArr.push(d.id) }
            if (d.pid && !nodeArr.includes(d.pid)) { nodeArr.push(d.pid) }
            if (d.pids) {
              d.pids.forEach(it => {
                if (!nodeArr.includes(it)) { nodeArr.push(it) }
              })
            }
          }
        })

        // 搜索所有的节点
        this.nodeWrap.attr('class', d => { return nodeArr.includes(d.id) ? 'node_wrap actived' : 'node_wrap disactived' })

        //搜索关联line
        this.lineWrap.attr('class', (d) => { if (nodeArr.includes(d['source'].id) && nodeArr.includes(d['target'].id)) { return 'lineText_wrap actived' } else { return 'lineText_wrap disactived' } })
      }
    },
    //切换分类
    toggleCategory(item) {
      item.value = !item.value
      let arr = this.option.node_category.filter(item => item.value).map(item => item.label)
      this.nodes = this.data.nodes.filter(node => { return arr.includes(node.relation) })
      // 遍历删除关系
      this.links = this.data.links.filter(link => {
        console.log(arr.includes(link.source) && arr.includes(link.target), 'link')
        return arr.includes(link.source.relation) && arr.includes(link.target.relation)
      })
      this.init()
    },



    /**----------------------------------------------------右侧详情栏功能------------------------------------------------------------------------------- */
    // 点击任务名称
    rwmcClick(row) {
      if (row.RWID) {
        let path = ''
        if (row.RWLX && row.RWLX.indexOf('[火]') != -1) { path = '/xfjd/hzdc/fireDetail' } else { path = '/xfjd/projectDetail' }
        this.$router.push({ path: path, query: { runId: this.$route.query.runId, RWID: row.RWID, path: this.$route.path, pagetype: 2, parentName: "综合数据数据识别推荐", } });
      } else {
        this.$message.warning("任务ID不存在");
      }
    },
    //点击 隐患项-单位
    dwmcClick(item) {
      this.selectCurrentRWMC = item
      this.selectCurrentYHCopy = JSON.parse(JSON.stringify(this.selectCurrentYH))
      this.selectCurrentYH = {}
    },
    //backYHList
    backYHList() {
      this.selectCurrentRWMC = {}
      this.shdwXgrwData = []
      this.selectCurrentYH = this.selectCurrentYHCopy
      this.selectCurrentYHCopy = {}
    },
    //点击社会单位节点
    async getRWLB(DWID) {
      try {
        //这儿调接口
        // let res = await post('/api/blade-xfjd/api/zstp/zhsj_gjdwckrw', { DWID: DWID, runId: this.$route.query.runId })
        this.shdwXgrwData = res.data.data || [{RWMC:'这儿的数据可通过调用接口获取'}]
      } catch (error) {

      }
    },
  },

  mounted() {
    this.init()
  }
}
</script> 

<style lang="scss" >
// node节点样式
.svg_wrap {
  svg {
    margin: 0 !important;
  }
  user-select: none;
}

// node 包裹
.node_wrap {
  circle {
    border: 10px #ff6a6a solid;
  }
  //失效
  &.disactived {
    circle {
    }
  }
  &.actived {
    circle {
      stroke: #ffc0cb;
      stroke-width: 14px;
      stroke-opacity: 0.15 + 0.3;
      fill: red;
      border: 10px #ff6a6a solid;
    }
  }
}

//线条 包裹
.lineText_wrap {
  &.actived {
    //线条
    .line_wrap {
      //线条
      text {
        &.actived {
          stroke: #ffc0cb;
          stroke-width: 14px;
          stroke-opacity: 0.15 + 0.3;
          background: red;
          border: 10px #ff6a6a solid;
        }
      }
    }
  }
}

.node_wrap.disactived,
.lineText_wrap.disactived {
  opacity: 0.1;
}

/**控件样式 */
.d3_content {
  .el-collapse-item__wrap,
  .el-collapse-item__header {
    background: transparent;
    overflow: unset;
  }

  display: flex;
  // 控制wrap
  .d3_control {
    transition: 0.2s;
    width: 240px;
    height: 686px;
    overflow: auto;
    box-shadow: 1px 10px 10px #aaa;
    .control_auto {
      width: 100%;
      .control_wrap {
        width: 200px;
        padding: 20px 10px 20px 20px;
        margin-right: 10px;

        .control_item {
          margin-bottom: 40px;
        }
        .d3_text {
          h3 {
            line-height: 50px;
          }
        }
      }
    }
    &.collapse {
      width: 0px;
    }
  }

  .svg_wrap {
    flex: 1;
  }
}
//右边提示信息
.info_yhx {
  position: absolute;
  right: 5px;
  top: 40px;
  width: 270px !important;
}
.node-card {
  border: 1px solid #9faecf;
  background-color: #fff;
  color: black;
  text-align: left;

  .el-card__header {
    border-bottom: 1px solid #50596d;
    padding: 6px 5px;
  }
  .el-card__body {
    max-height: 500px;
    overflow: auto;
  }
}
</style>

